<template>
  <div class="email-container">
    <div class="title">{{ title }}</div>
    <div class="sub-title">可选</div>
    <a-transfer :show-select-all="false" :titles="['', '']"
      :data-source=" airlineTransferList" :render="item => item.name"
      :target-keys="targetKeys" :selected-keys="selectedKeys" :list-style="{
        width: '50%',
        height: '180px',
      }" @change="handleChange" @selectChange="handleSelectChange" @scroll="handleScroll" />
  </div>
</template>
<script>
import { mapState, mapMutations } from 'vuex';
export default {
  props: {
    airlineList: {
      default: () => []
    },
    title: {
      type: String,
      default: () => []
    }
  },
  data() {
    return {
      targetKeys: [],
      selectedKeys: []
    };
  },
  computed: {
    ...mapState('emailNotification', ['notificationService']),
    airlineTransferList() {
      return this.airlineList.map(item => {

        item.key = item.id;
        item.title = item.name;
        return  item;
      });
    }
  },
  mounted() {
    const emailRow = JSON.parse(localStorage.getItem('emailRow') ?? '{}');

    if (Object.values(emailRow)?.length > 0) {
      this.targetKeys = emailRow.airlineIds;
    }
  },
  methods: {
    ...mapMutations('emailNotification', ['setState']),
    handleChange(nextTargetKeys, direction, moveKeys) {
      console.log(nextTargetKeys);
      this.targetKeys = nextTargetKeys;
      this.setState({ key: 'notificationService', payload: { ...this.notificationService, airlineIds: nextTargetKeys } });
    },
    handleSelectChange(sourceSelectedKeys, targetSelectedKeys) {
      this.selectedKeys = [...sourceSelectedKeys, ...targetSelectedKeys];

      // console.log('sourceSelectedKeys: ', sourceSelectedKeys);
      // console.log('targetSelectedKeys: ', targetSelectedKeys);
    },
    handleScroll() {

    }

  }
};
</script>
<style lang="less" scoped>
</style>
